﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    HQPad.Models.CharacterHeader header = (HQPad.Models.CharacterHeader)ViewBag.Header;
    HQPad.Models.SilhouetteRecord silhouette = (HQPad.Models.SilhouetteRecord)ViewBag.Silhouette;
    string name = (string)ViewBag.CharacterName;
}


<h1 class="with-control-box editable character-name">@Html.Raw(name)</h1>
<div class="message-box"></div>

<section class="full-width header-container">
@Html.Partial("~/Views/Shared/Character/CharacterHeader.cshtml", header)
</section>

@Html.Partial("~/Views/Shared/Character/CharacterTabs.cshtml")

<section class="content flush-with-nav flat-top skills-container">
@Html.Partial("~/Views/Shared/Character/CharacterSkills.cshtml")
</section>

<section class="sidebar flush-with-nav">
    <div class="silhouette-container">
        @Html.Partial("~/Views/Shared/Character/CharacterSilhouette.cshtml", silhouette)
    </div>
</section>

<script src="@Url.Content("~/Scripts/waiter.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/character.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/skills.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/editable.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/messagelist.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/global.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.fn.character({
            raceChangeActionUrl: '@Url.Action("SetRace")',
            classChangeActionUrl: '@Url.Action("SetClass")',
            headerContainerSelector: '.header-container',
            tableChangeCallback: function () {
                $.fn.skills('refreshSkills');
            },
            guildChangeActionUrl: '@Url.Action("SetGuild")',
            guildChangeCallback: function () {
                $.fn.skills('refreshSkills');
            },
            recordContainerSelector: '.record-container',
            addRecordItemUrl: '@Url.Action("AddRecord")',
            addRecordCallback: null,
            headerUrl: '@Url.Action("RefreshHeader")',
            headerRefreshedCallback: function () {
                $('.header-container .tooltipable[title]').tooltip();
            },
            updateNameUrl: '@Url.Action("UpdateName")',
            saveUrl: '@Url.Action("SaveCharacter")',
            silhouetteUrl: '@Url.Action("RefreshSilhouette")',
            silhouetteContainerSelector: '.silhouette-container',
            silhouetteRefreshedCallback: function () {
                // set up generic tooltips.
                $('.tooltipable', '.silhouette-container').tooltip();

                // set up named tooltips.
                setupSilhouette();
            }
        });

        $.fn.skills({
            updateSkillUrl: '@Url.Action("UpdateSkill")',
            skillUpdatedCallback: function () {
                $.fn.character('refreshHeader');

                $.fn.character('refreshSilhouette');

                setupSkills();
            },
            refreshSkillsUrl: '@Url.Action("RefreshSkills")',
            skillsContainer: '.skills-container',
            skillsCallback: function () {
                setupSkills();
            }
        });

        setupSkills();

        $('h1.character-name').editable({
            updateCompleteCallback: function (updatedObject, newValue) {
                $.fn.character('updateName', newValue);
            },
            validateOk: null,
            isNumberValue: false
        });

        // set up generic tooltips.
        $('.tooltipable').tooltip();

        setupSilhouette();

        setupMessageList(); // defined in global.
    });

    function skillUpdated(updatedObject, newValue) {
        var skillId = $(updatedObject).attr('skillid');

        if (skillId && newValue) {
            $.fn.skills('updateSkill', skillId, newValue);
        }
    }

    function setupSilhouette() {
        // set up named tooltips.
        $('.named-tooltip', '.silhouette-container').each(function () {
            var tipId = $(this).attr('tip');

            $(this).tooltip({
                tip: '#tooltip-' + tipId,
                position: 'top center',
                offset: [10, 10],
                events: {
                    tooltip: 'mouseleave'
                }
            });
        });
    }

    function validateSkill(updatedObject, newValue) {
        var maxRanks = parseInt($(updatedObject).attr('maxranks'));

        // validate ranks.
        if (maxRanks >= 0 && parseInt(newValue) > maxRanks) {
            $(updatedObject).editable('reset'); // reset original value on editable.
            showWarningText('Skill has a maximum rank value of ' + maxRanks);
            return false;
        }

        return true;
    }

    /*
    * Set up the skills table checkbox update.
    */
    function setupSkills() {
        $('.skills-container .editable').editable({
            updateCompleteCallback: skillUpdated,
            validateOk: validateSkill,
            isNumberValue: true
        });

        $('.skills-container .one-rank-skill').change(function () {
            var $this = $(this);

            var isChecked = $this.is(':checked');

            skillUpdated($this, (isChecked) ? "1" : "0");
        });
    }


</script>
